<template>
	<div class="upload-container">
		<el-upload :data="dataObj"
				   :multiple="false"
				   :show-file-list="false"
				   :on-success="handleImageSuccess"
				   class="image-uploader"
				   drag
				   action="https://httpbin.org/post">
			<i class="el-icon-upload"></i>
			<div class="el-upload__text">
				将文件拖到此处，或<em>点击上传</em>
			</div>
		</el-upload>
		<div class="image-preview">
			<div v-show="imageUrl.length>1" class="image-preview-wrapper">
				<img :src="imageUrl+'?imageView2/1/w/200/h/200'" />
				<div class="image-preview-action">
					<i class="el-icon-delete" @click="rmImage"></i>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { getToken } from '/vue/api/qiniu.js'

	module.exports = {
		name: 'SingleImageUpload',
		props: {
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				tempUrl: '',
				dataObj: { token: '', key: '' }
			}
		},
		computed: {
			imageUrl() {
				return this.value
			}
		},
		methods: {
			rmImage() {
				this.emitInput('')
			},
			emitInput(val) {
				this.$emit('input', val)
			},
			handleImageSuccess() {
				this.emitInput(this.tempUrl)
			},
			beforeUpload() {
				const _self = this
				return new Promise((resolve, reject) => {
					getToken().then(response => {
						const key = response.data.qiniu_key
						const token = response.data.qiniu_token
						_self._data.dataObj.token = token
						_self._data.dataObj.key = key
						this.tempUrl = response.data.qiniu_url
						resolve(true)
					}).catch(err => {
						console.log(err)
						reject(false)
					})
				})
			}
		}
	}
</script>

<style scoped>
	.upload-container {
		width: 100%;
		position: relative;
	}

		.upload-container:after {
			content: "";
			display: table;
			clear: both;
		}

		.upload-container .image-uploader {
			width: 60%;
			float: left;
		}

		.upload-container .image-preview {
			width: 200px;
			height: 200px;
			position: relative;
			border: 1px dashed #d9d9d9;
			float: left;
			margin-left: 50px;
		}

			.upload-container .image-preview .image-preview-wrapper {
				position: relative;
				width: 100%;
				height: 100%;
			}

				.upload-container .image-preview .image-preview-wrapper img {
					width: 100%;
					height: 100%;
				}

			.upload-container .image-preview .image-preview-action {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				cursor: default;
				text-align: center;
				color: #fff;
				opacity: 0;
				font-size: 20px;
				background-color: rgba(0, 0, 0, 0.5);
				transition: opacity .3s;
				cursor: pointer;
				text-align: center;
				line-height: 200px;
			}

				.upload-container .image-preview .image-preview-action .el-icon-delete {
					font-size: 36px;
				}

			.upload-container .image-preview:hover .image-preview-action {
				opacity: 1;
			}
</style>
